<template>
  <div class="date-box">
    <div class="date-ipt">
      <div class="date-range">
        <el-input
          :input-style="{ textAlign: 'center' }"
          @click.stop="showStartDate = true"
          readonly
          v-model="startDate"
        />
        <div class="separator">-</div>
        <el-input
          :input-style="{ textAlign: 'center' }"
          @click.stop="showEndDate = true"
          readonly
          v-model="endDate"
        />
      </div>
      <div class="date-icon" @click="handleCalendarClick">
        <van-icon size="16px" name="calendar-o" />
      </div>
    </div>

    <van-popup
      v-model:show="showStartDate"
      destroy-on-close
      position="bottom"
    >
      <van-date-picker
        title="选择起始日期"
        :model-value="pickerStartDate"
        @confirm="onConfirmStart"
        @cancel="showStartDate = false"
      />
    </van-popup>

    <van-popup
      v-model:show="showEndDate"
      destroy-on-close
      position="bottom"
    >
      <van-date-picker
        title="选择结束日期"
        :model-value="pickerEndDate"
        @confirm="onConfirmEnd"
        @cancel="showEndDate = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import utils from "@/utils/utils.js"

const emit = defineEmits(['onDateRangeChange'])
const props = defineProps({
  dateNumber: {
    type: Number,
    default: 0,
  }
})

const startDate = ref('')
const endDate = ref('')
const showStartDate = ref(false)
const showEndDate = ref(false)

const pickerStartDate = computed(() => startDate.value.split('-'))
const pickerEndDate = computed(() => endDate.value.split('-'))

watch(
  () => props.dateNumber,
  (newVal) => {
    if (newVal) {
      setDateRange(newVal)
    }
  },
  { immediate: true }
)

function setDateRange(dayNumber) {
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * dayNumber)

  startDate.value = utils.formatDate(start, 'yyyy-MM-dd', true)
  endDate.value = utils.formatDate(end, 'yyyy-MM-dd', true)

  emitDateRangeChange(false)
}

function handleCalendarClick() {
  showStartDate.value = true
}

function onConfirmStart({ selectedValues }) {
  startDate.value = selectedValues.join('-')
  showStartDate.value = false
  emitDateRangeChange(true)
}

function onConfirmEnd({ selectedValues }) {
  endDate.value = selectedValues.join('-')
  showEndDate.value = false
  emitDateRangeChange(true)
}

function emitDateRangeChange(isConfirm = false) {
  if (+new Date(startDate.value) > +new Date(endDate.value)) {
    showToast('起始日期不能晚于结束日期')
    return
  }
  emit('onDateRangeChange', [startDate.value, endDate.value], isConfirm)
}
</script>

<style scoped lang="scss">
.date-box {
  .date-ipt {
    margin-top: 10px;
    display: flex;
    align-items: center;

    .date-range {
      flex: 1;
      width: 1px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .separator {
      margin: 0 10px;
    }

    .date-icon {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
